<!--
 * @Author: 曹哈哈 2273766442@qq.com
 * @Date: 2024-11-01 16:23:56
 * @LastEditors: 曹哈哈 2273766442@qq.com
 * @LastEditTime: 2024-11-01 16:33:32
 * @FilePath: \management-mini-program\src\pages\main\parkingLot\modal\channel\ChannelForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view>
        <tn-popup
            v-model="isPopupVisible"
            width="95%"
			height="90%"
            open-direction="bottom"
            @close="close"
            close-btn>
            <view class="tn-m-sm tn-p-sm  tn-mb-xl">
                <view class="tn-mb-xl">
                    <tn-title
                        size="lg"
                        :title="(formType == 'create' ? '新增' : '修改') + '角色'"
                        mode="hLine"
                        sub-title="VehicleType"
                        assist-color="tn-blue" />
                </view>
				<tn-form ref="formRef" :model="formData" label-position="top">
				    
				<tn-form-item   prop="parkLotName">
				  <template #label>
				    <tn-title   title="所属车场" mode="dot" sub-title="parkLotName" assist-color="tn-blue" />
				  </template>
				  <tn-input v-model="formData.carPlate"  disabled :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
				 
				</tn-form-item>
				<tn-form-item   prop="roleName">
				  <template #label>
				    <tn-title   title="角色名称" mode="dot" sub-title="roleName" assist-color="tn-red" />
				  </template>
				  <tn-input v-model="formData.roleName"   :border="customStyleBorder"   :custom-style="customStyleInput"></tn-input>
				 
				</tn-form-item>
				
				  
				<tn-form-item   prop="parkLotName"   class="  tn-p-sm tn-border tn-grey-light_border
">
				  <template #label>
				    <tn-title   title="权限列表" mode="vLine" sub-title="parkLotName" assist-color="tn-blue" />
				  </template>
				 
               <scroll-view
                    style="height: 50vh"
                    scroll-y="true" 
                  >
                    <DaTree
                        :data="roomTreeData"
                        labelField="name"
                        valueField="id"
                        showCheckbox 
                        loadMode
                        :loadApi="GetApiData"
                        defaultExpandAll
						:defaultCheckedKeys="defaultCheckedKeysValue"
                        @change="handleTreeChange"
                        @expand="handleExpandChange"></DaTree>
                </scroll-view>
				</tn-form-item>
				<view class="tn-tabbar-height"></view>
				
				</tn-form>
            </view>

            <view class="floating-button tn-flex justify-center tn-mt-xl"
                ><tn-button
                    @click="confirmEdit"
                    width="80%"
                    size="xl"
                    text-color="tn-white"
                    bg-color="tn-gradient-bg__cool-8"
                    >提 交</tn-button
                ></view
            >
        </tn-popup>
    </view>
</template>

<script setup lang="ts">
    import { defineEmits, ref, reactive } from "vue";
    import DaTree from "@/components/da-tree/index.vue";
	//表单配置处理-背景样式处理
	const customStyleInput=ref( {backgroundColor:'#ededed75'}) 
	const customStyleBorder=ref( false) 
    const pkId = ref();

    const isPopupVisible = ref(false);
    const formType = ref(""); // 表单的类型：create - 新增；update - 修改
    const formData = ref({
        id: undefined,
        roleName: undefined,
        roleIds: [],
    });
    const formRef = ref(); // 表单 Ref

    /** 打开弹窗 */
    const open = async (type: string, id?: number) => {
        isPopupVisible.value = true;
        formType.value = type;

        // 修改时，设置数据
        if (id) {
            // 设置修改主键
            pkId.value = id;
            try {
                // getDeatilById 获取formData 数据
            } catch {}
        }
    };
    defineExpose({ open }); // 提供 open 方法，用于打开弹窗
    const close = () => {
        isPopupVisible.value = false;
    };
    /**  树状数据处理 组件文档 https://ext.dcloud.net.cn/plugin?id=12384*/
	// 默认勾选的节点
    const defaultCheckedKeysValue = ref(["21", "222"]); 
    const roomTreeData = ref([
        {
            id: "2",
            name: "行政中心",
            children: [
                {
                    id: "21",
                    name: "行政部",
                    children: [
                        {
                            id: "211",
                            name: "行政一部",
                            children: null,
                        },
                        {
                            id: "212",
                            name: "行政二部",
                            children: [], 
                        },
                    ],
                },
                {
                    id: "22",
                    name: "财务部",
                    children: [
                        {
                            id: "221",
                            name: "财务一部",
                            children: [], 
                        },
                        {
                            id: "222",
                            name: "财务二部",
                            children: [],
                        },
                    ],
                },
                {
                    id: "23",
                    name: "人力资源部",
                    children: [
                        {
                            id: "231",
                            name: "人力一部",
                            children: [],
                        },
                        {
                            id: "232",
                            name: "人力二部",
                            append: "",
                        },
                        {
                            id: "233",
                            name: "人力一部",
                            children: [],
                        },
                        {
                            id: "234",
                            name: "人力二部",
                            append: "",
                        },
                         
                    ],
                },
            ],
        },
    ]);
    const doExpandTree = (keys, expand) => {
        DaTreeRef.value?.setExpandedKeys(keys, expand);

        const gek = DaTreeRef.value?.getExpandedKeys();
        console.log("当前已展开的KEY ==>", gek);
    };
    const doCheckedTree = (keys, checked) => {
        DaTreeRef.value?.setCheckedKeys(keys, checked);

        const gek = DaTreeRef.value?.getCheckedKeys();
        console.log("当前已选中的KEY ==>", gek);
    };
    const handleTreeChange = (allSelectedKeys, currentItem) => {
        console.log("handleTreeChange ==>", allSelectedKeys, currentItem);
    };
    const handleExpandChange = (expand, currentItem) => {
        console.log("handleExpandChange ==>", expand, currentItem);
    };
</script>

<style>
	.floating-button {
		position: fixed;
		/* 固定定位 */
		bottom: 20rpx;
		/* 距离底部20rpx */
		left: 0;
		/* 左对齐 */
		right: 0;
		/* 右对齐 */
		margin: 0 auto;
		/* 居中 */
	}
	
	.tn-tabbar-height {
			min-height:100rpx;
			height: calc(100rpx + env(safe-area-inset-bottom) / 2);
			height: calc(100rpx + constant(safe-area-inset-bottom));
		} 
</style>
